<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<title>限时秒杀</title>
	<!--标准mui.css-->
	<link rel="stylesheet" href="../css/mui.min.css">
	<!--自定义的css-->
	<link rel="stylesheet" type="text/css" href="../css/common.css"/>
	<style>
		.mui-segmented-control.mui-segmented-control-inverted {
			background: #413F3F;
		}
		.mui-segmented-control.mui-scroll-wrapper .mui-control-item {
			padding: 4px 20px;
		}
		.mui-segmented-control .mui-control-item {
			line-height: 16px;
			font-size: 10px;
		}
		.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
			color: #fff;
			background: #CD293D;
		}
		.mui-segmented-control.mui-segmented-control-inverted .mui-control-item {
			color: #A09E9E;
		}
		.mui-fullscreen .mui-segmented-control~.mui-slider-group {
			top: 38px;
		}
		.mui-slider .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-group .mui-slider-item {
			border-top: 0;
		}
		.list-top-title {
			display: flex;
			justify-content: space-between;
			height: 40px;
			background: #fff;
		}
		.kill-prompt {
			padding-left: 10px;
			line-height: 40px;
		}
		.kill-prompt img {
			vertical-align: middle;
			width: 12px !important;
			height: 12px;
			margin-right: 5px;
		}
		.kill-prompt span {
			font-size: 12px;
			color: #838181;
		}
		.distance-start {
			padding-right: 10px;
			line-height: 40px;
			font-size: 12px;
			color: #838181;
		}
		.mui-table-view {
			border-top: 1px solid #c8c7cc;
			background: #fff;
		}
		.mui-table-view .mui-media-object {
			max-width: 80px;
			height: 80px;
		}
		.price-seckill {
			margin-top: 15px;
			margin-bottom: 5px;
		}
		.discount-price {
			color: #CD293D;
			margin-right: 10px;
		}
		.original-price {
			color: #8C8A8A;
			text-decoration: line-through;
		}
		.sec-btn .mui-btn {
			margin-top: -12px;
			border-radius: 12px;
			background: #BCB8B8;
			color: #fff;
		}
		.sec-btn .mui-btn.active {
			background: #EA1C16;
		}
		.mui-progressbar-danger span {
			background-color: #CD293D;
		}
		.span-font {
			font-size: 12px;
			color: #A2A1A1;
		}
		.div-font {
			font-size: 12px;
			color: #77bc1f;
		}
		.progressbar-poss .mui-progressbar {
			width: 100px;
			height: 4px;
			display: inline-block;
		}
	</style>
</head>
<body>
	<div class="mui-content">
		<!--<div id="slider" class="mui-slider mui-fullscreen">
			<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
				<div class="mui-scroll">
					<a class="mui-control-item mui-active" href="#item1mobile">
						00:00<br />抢购中
					</a>
				</div>
			</div>
			<div id="sliderGroup" class="mui-slider-group">
				<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
					<div class="list-top-title">
						<div class="kill-prompt"><img src="../img/secKill/naozhong.png"><span>限时限量  疯狂抢购</span></div>
						<div class="distance-start"><span>距离下场开始：<span id="countDown">00:00:00</span></span></div>
					</div>
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" src="../img/index/goods_image.png">
								<div class="mui-media-body">
									<div class="mui-ellipsis">自然紫薯脆60g</div>
									<div class="price-seckill space-between">
										<div><span class="discount-price">2.00</span><span class="original-price">15:00</span></div>
										<div class="sec-btn"><button type="button" class="mui-btn">抢光了</button></div>
									</div>
									<div class="space-between">
										<div class="progressbar-poss">
											<span class="span-font">已抢购100%</span>
											<p class="mui-progressbar mui-progressbar-danger" data-progress="100"><span></span></p>
										</div>
										<div class="span-font">已抢：20件</div>
									</div>
								</div>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>-->
	</div>	
	<script type="text/javascript" src="../js/thirdparty/jquery-3.3.1.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/mui.min.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/mui.pullToRefresh.js"></script>
	<script type="text/javascript" src="../js/thirdparty/mui.pullToRefresh.material.js"></script>
	<script type="text/javascript" src="../js/thirdparty/swiper.min.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/spin.min.js" ></script>
	<script type="text/javascript" src="../js/utils/regular.js" ></script>
	<script type="text/javascript" src="../js/utils/boot.js" ></script>
	<script>
		var userID = base.getParameter("userID");
		mui.init();
		$(function(){
			base.postData(base.url.getSeckillGoodsList, {userID:userID}, callbackSeckillGoodsList);
		});
		function callbackSeckillGoodsList(data) {
			if (data.success) {
				var seckillList = data.context.seckillList;
				initSlider (seckillList);
				var gallery = mui('.mui-slider').slider();
				gallery.refresh();
			} else {
				mui.toast(data.msg);
			}
		}
		function initSlider (seckillList) {
			var slider = '<div id="slider" class="mui-slider mui-fullscreen">';
				slider += '	<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">';
				slider += '		<div class="mui-scroll">';
			var tab = '';
			var group = '';
			for (var i=0; i < seckillList.length; i++) {
				var myDate = new Date();
				var isActive = 0;
				var pdata = myDate.getFullYear() + '-' +  (myDate.getMonth() + 1) + '-' + myDate.getDate() + ' ' + seckillList[i].seckillStartTime;
				if (!chekeTodayTime(pdata)) {
					if (i+1 < seckillList.length) {
						pdata = myDate.getFullYear() + '-' +  (myDate.getMonth() + 1) + '-' + myDate.getDate() + ' ' + seckillList[i+1].seckillStartTime;
						if (chekeTodayTime(pdata) ) {
							tab += '<a class="mui-control-item mui-active" href="#item'+i+'mobile">'+seckillList[i].seckillStartTime+'<br />抢购中</a>';
							isActive = 1;
						}else{
							tab += '<a class="mui-control-item" href="#item'+i+'mobile">'+seckillList[i].seckillStartTime+'<br />已结束</a>';
						}
					}else {
						tab += '<a class="mui-control-item mui-active" href="#item'+i+'mobile">'+seckillList[i].seckillStartTime+'<br />抢购中</a>';
						isActive = 1;
					}
				}else{
					if (i == 0) {
						tab += '<a class="mui-control-item mui-active" href="#item'+i+'mobile">'+seckillList[i].seckillStartTime+'<br />即将开始</a>';
					}else {
						tab += '<a class="mui-control-item" href="#item'+i+'mobile">'+seckillList[i].seckillStartTime+'<br />即将开始</a>';	
					}
					isActive = 2;
				}
				if (isActive == 1) {
					group += '<div id="item'+i+'mobile" class="mui-slider-item mui-control-content mui-active">';
					group += '	<div class="list-top-title">';
					group += '		<div class="kill-prompt"><img src="../img/secKill/naozhong.png"><span>限时限量  疯狂抢购</span></div>';
					if (i+1 < seckillList.length) {
						pdata = myDate.getFullYear() + '-' +  (myDate.getMonth() + 1) + '-' + myDate.getDate() + ' ' + seckillList[i+1].seckillStartTime;
						group += '		<div class="distance-start"><span>距离下场开始：<span class="count-down" open-data="'+pdata+'">'+pdata+'</span></span></div>';	
					}
					group += '	</div>';
					group += '	<ul class="mui-table-view">';
				}else if (isActive == 2) {
					group += '<div id="item'+i+'mobile" class="mui-slider-item mui-control-content">';
					group += '	<div class="list-top-title">';
					group += '		<div class="kill-prompt"><img src="../img/secKill/naozhong.png"><span>限时限量  疯狂抢购</span></div>';
					pdata = myDate.getFullYear() + '-' +  (myDate.getMonth() + 1) + '-' + myDate.getDate() + ' ' + seckillList[i].seckillStartTime;
					group += '		<div class="distance-start"><span>距离本场开始：<span class="count-down" open-data="'+pdata+'">'+pdata+'</span></span></div>';
					group += '	</div>';
					group += '	<ul class="mui-table-view">';
				}else {
					group += '<div id="item'+i+'mobile" class="mui-slider-item mui-control-content">';
					group += '	<div class="list-top-title">';
					group += '		<div class="kill-prompt"><img src="../img/secKill/naozhong.png"><span>本场次活动已结束</span></div>';
					group += '	</div>';
					group += '	<ul class="mui-table-view">';
				}
				for (var j=0; j<seckillList[i].seckillListOne.length; j++) {
					group += pingSeckill(seckillList[i].seckillListOne[j], isActive, seckillList[i].seckillStartTime);
				}		 	
				group += '</ul></div>';	
			}
			slider += tab;
			slider += '		</div>';
			slider += '</div>';
			slider += '<div id="sliderGroup" class="mui-slider-group">';	
			slider += group;
			slider += '</div>';
			$(".mui-content").html(slider);
			$(".mui-content .count-down").each(function(i,e){
				countDown($(e).attr("open-data"), e);
			});
			mui(".mui-content .mui-progressbar").each(function () {
				mui(this).progressbar({progress:this.getAttribute("data-progress")}).show();
			});
		}
		function pingSeckill(data, isActive, seckillStartTime) {
			var html = '<li class="mui-table-view-cell mui-media">'+
						'	<input type="hidden" name="goodsID" value="'+data.goodsID+'">'+
						'	<input type="hidden" name="merchantID" value="'+data.merchantID+'">'+
						'	<input type="hidden" name="seckillID" value="'+data.seckillID+'">'+
						'	<input type="hidden" name="seckillPrice" value="'+(data.seckillPrice/100).toFixed(2)+'">'+
						'	<a href="javascript:;">'+
						'		<img class="mui-media-object mui-pull-left" src="'+data.goodsImg+'">'+
						'		<div class="mui-media-body">'+
						'			<div class="mui-ellipsis">'+data.goodsName+'</div>'+
						'			<div class="price-seckill space-between">'+
						'				<div><span class="discount-price">'+(data.seckillPrice/100).toFixed(2)+'</span><span class="original-price">'+(data.price/100).toFixed(2)+'</span></div>';
					if (isActive == 1) {
						if (data.stock < data.seckillAllStock) {
				html += '				<div class="sec-btn"><button type="button" class="mui-btn active">马上抢</button></div>';			
						}else{
				html += '				<div class="sec-btn"><button type="button" class="mui-btn">抢光了</button></div>';
						}
					}	
				html += '			</div>';
					if (isActive == 2) {
				html += '			<div class="div-font">'+seckillStartTime+'准时开抢</div>';		
					}else{
				html += '			<div class="space-between">'+
						'				<div class="progressbar-poss">'+
						'					<span class="span-font">已抢购'+(data.stock/data.seckillAllStock)*100+'%</span>'+
						'					<p class="mui-progressbar mui-progressbar-danger" data-progress="'+(data.stock/data.seckillAllStock)*100+'"><span></span></p>'+
						'				</div>'+
						'				<div class="span-font">已抢：'+data.stock+'件</div>'+
						'			</div>';
					}
				html += '		</div>'+
						'	</a>'+
						'</li>';
			return html;			
		}
		
		$(".mui-content").on("tap", ".mui-table-view-cell", function(){
			var goodsID = $(this).find("input[name='goodsID']").val();
			var merchantID = $(this).find("input[name='merchantID']").val();
			window.location.href = 'goodsDetail.html?userID='+userID+'&goodsID='+goodsID+'&merchantID='+merchantID;
		});
		
		$(".mui-content").on("tap", ".sec-btn .mui-btn.active", function(e){
			e.stopPropagation();
			var goodsID = $(this).closest(".mui-table-view-cell").find("input[name='goodsID']").val();
			var merchantID = $(this).closest(".mui-table-view-cell").find("input[name='merchantID']").val();
			var seckillID = $(this).closest(".mui-table-view-cell").find("input[name='seckillID']").val();
			var seckillPrice = $(this).closest(".mui-table-view-cell").find("input[name='seckillPrice']").val();
			var url = base.url.addShoppingCart;
			var data = {
				userID: userID,
				goodsID: goodsID,
				seckillID:seckillID,
				isSeckill:1,
				number:1,
				standardID: 0,
				merchantID: merchantID,
				subtotal:seckillPrice
			}
			base.postData(url,data,addShoppingCartData);
		});
		function addShoppingCartData(data) {
			if (data.success) {
				mui.toast(data.msg);
			} else {
				mui.toast(data.msg);
			}
		}
		function countDown(startTime, obj){
			setInterval(function () {
			    var nowtime = new Date();
			    startTime = new Date(startTime);
			    var time = startTime - nowtime;
	//		    var day = parseInt(time / 1000 / 60 / 60 / 24);
			    var hour = parseInt(time / 1000 / 60 / 60 % 24);
			    var minute = parseInt(time / 1000 / 60 % 60);
			    var seconds = parseInt(time / 1000 % 60);
			    if (hour < 10) {
			    	hour = "0" + hour;
			    }
			    if (minute < 10) {
			    	minute = "0" + minute;
			    }
			    if (seconds < 10) {
			    	seconds = "0" + seconds;
			    }
			    $(obj).html(hour + ":" + minute + ":" + seconds);
			}, 1000);
		}
		
		//判断输入时间是否大于当前时间
		function chekeTodayTime(yourtime) {
			yourtime = yourtime.replace("-","/");//替换字符，变成标准格式  
			var d2=new Date();//取今天的日期  
			var d1 = new Date(Date.parse(yourtime));  
			if(d1 > d2){  
			  return true;  
			} else {
				return false;
			}
		}
	</script>
</body>
</html>
